<template>
	<view class="body">
		<xk-header title="开票详情"></xk-header>
		<view class="util-bar">
			<!-- <scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="pullDownRefresh" scroll-y :style="`height:${ scrollViewHeight }px;`"> -->
				<view class="estate-box">
					<u-row customStyle="margin-bottom:15px">
						<u-col span="12"><view class="danhao-text">单号：{{invoicData.apply_no}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">公司类型:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.company_type === 10 ? '小规模纳税人(或个人)' : '一般纳税人' || '暂无'}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">开票类型 :</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_invoic_type === 10 ? '增值税专业发票' : '增值税普通发票' || '暂无' }}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">纳税人识别号:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_payer_no || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">纳税人名称:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.invoice_name || '' }}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">开户行名称 :</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_bank_name || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">开户银行账号:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_bank_account || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">注册地址:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_address || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">手机号码:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.mobile || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">邮箱:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_email || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">是否接收电子邮箱:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_isemail || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">客户名称:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.customer_name || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">合计(小写):</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.apply_total || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">费用类型:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.project_type || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">费用开始时间:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.start_date || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">费用结束时间:</view></u-col>
						<u-col span="7"><view class="black-text">{{invoicData.end_date || ''}}</view></u-col>
					</u-row>
					<u-row customStyle="margin-bottom:8px">
						<u-col span="5"><view class="grey-text">图片展示:</view></u-col>
						<u-col span="7">
							<view v-if="invoicData.apply_pic">
								<image-list :pics="invoicData.apply_pic" :key="new Date().getTime()"></image-list>
							</view>
						</u-col>
					</u-row>

					<!-- 收款记录明细弹窗 -->
					<u-row customStyle="margin-top:15px;margin-bottom:15px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:15px 0 15px 0;">
						<u-col span="5"><view class="grey-text">收款记录明细:</view></u-col>
						<u-col span="7"><view class="black-text" @click="payDetail(invoicData.dets)" style="text-align: right;"><u-icon label="查看记录" labelColor="#0660FF" labelPos="left" name="arrow-right"></u-icon></view></u-col>
					</u-row>
				</view>
			<!-- </scroll-view> -->
		</view>

		<!-- 受理结果 -->
		<view class="util-bar" v-if="invoicData.invoic_status == 40||invoicData.invoic_status == 50 ||invoicData.invoic_status == 30">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">受理结果</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5" v-if="invoicData.invoic_status == 30"><view class="grey-text" style="color: #FE2E2E;">发票信息:</view></u-col>
					<u-col span="5" v-else><view class="grey-text">发票信息:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.invoic_info}}</view></u-col>
				</u-row>
			</view>
		</view>

		<!-- 经办人信息 -->
		<view class="util-bar" v-if="invoicData.invoic_status == 50">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">办理人信息</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办人:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.register_user_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办人id:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.register_user_id}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办部门:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.register_dept_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办部门id:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.register_dept_id}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">经办日期:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.register_date}}</view></u-col>
				</u-row>
			</view>
		</view>

		<!-- 登记结果 -->
		<view class="util-bar" v-if="invoicData.invoic_status == 50">
			<view class="estate-box">
				<u-row customStyle="margin-bottom:15px">
					<u-col span="12"><view class="danhao-text">登记结果</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">备注:</view></u-col>
					<u-col span="7"><view class="black-text">{{invoicData.register_remark}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:8px">
					<u-col span="5"><view class="grey-text">发票文件:</view></u-col>
					<u-col span="7">
						<view v-if="invoicData.invoic_text">
							<image-list :pics="invoicData.invoic_text"></image-list>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>

		<u-loading-page loading-mode="spinner" :loading="loadingText" loadingText="数据加载中" fontSize="16"></u-loading-page>
		<!--修改按钮-->
		<view class="common-bottom-view" v-if="invoicData.invoic_status == 10 || invoicData.invoic_status == 30">
			<view class="common-btn btn-plant btn" @click="modify">修改</view>
			<view class="common-btn btn" @click="cancel">删除</view>
		</view>
		<view class="common-bottom-view" v-else>
			<view class="common-btn" @click="back">返回</view>
		</view>
		<view class="common-zw"></view>

		<u-popup
		:show="showDetailcard"
		:round="8"
		closeable
		@close="showDetailcard=false"
		customStyle="height:60%"
		>
			<view class="wy-title">收款记录明细</view>
			<scroll-view scroll-y="true" class="scroll-Y">
			<view class="wybox" v-for="(item, index) of dets_detail" :key="index">
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">编号:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{item.project_no}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">项目类型:</view></u-col>
					<u-col span="7" v-if="item.project_type == 5"><view class="wy-right-text">租金</view></u-col>
					<u-col span="7" v-if="item.project_type == 10"><view class="wy-right-text">管理费</view></u-col>
					<u-col span="7" v-if="item.project_type == 15"><view class="wy-right-text">电费</view></u-col>
					<u-col span="7" v-if="item.project_type == 20"><view class="wy-right-text">水费</view></u-col>
					<u-col span="7" v-if="item.project_type == 25"><view class="wy-right-text">热水费</view></u-col>
					<u-col span="7" v-if="item.project_type == 30"><view class="wy-right-text">空调冷量费</view></u-col>
					<u-col span="7" v-if="item.project_type == 35"><view class="wy-right-text">空调热量费</view></u-col>
					<u-col span="7" v-if="item.project_type == 40"><view class="wy-right-text">有偿服务费</view></u-col>
					<u-col span="7" v-if="item.project_type == 45"><view class="wy-right-text">其他</view></u-col>

				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">项目名称:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{item.project_name}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">数量:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{item.project_num}}</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">单价(元):</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{item.project_price}}元</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:10px">
					<u-col span="5"><view class="wy-left-text">金额（含税价）:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{item.project_money}}元</view></u-col>
				</u-row>
				<u-row customStyle="margin-bottom:1px">
					<u-col span="5"><view class="wy-left-text">备注:</view></u-col>
					<u-col span="7"><view class="wy-right-text">{{item.remark}}</view></u-col>
				</u-row>
			</view>
			<view v-if="dets_detail.length===0" style="padding:15px;"><u-empty mode="data" :icon="(imgUrl+'/wx/empty_data_icon.png')"></u-empty></view>
			</scroll-view>
		</u-popup>

		<!-- 取消票单 -->
		<u-popup
		:show="cancelInvoic"
		:round="8"
		closeable
		@close="cancelInvoic=false"
		customStyle="height:60%"
		>
			<view class="wy-title">删除票单原因</view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<u--form
				labelPosition="left"
				:model="cancelData"
				ref="uviewForm"
				>
					<u-form-item
						label="票单取消原因:"
						prop="cancel_content"
						borderBottom
						ref="cancel_content"
						labelWidth="120"
						style = "margin-left: 5px;"
					>

					</u-form-item>
					<u--textarea v-model="cancelData.cancel_content" placeholder="请输入取消原因" height="50" count confirmType="done" style="margin: 5px;margin-left: 5px;"></u--textarea>
				</u--form>
			</scroll-view>
			<u-row customStyle="margin-bottom:1px" style = "margin-bottom: 20px;margin-top: 5px;">
				<u-col span="5"><view class="wy-left-text"></view></u-col>
				<u-col span="7">
					<u-button type="primary" text="点击删除" @click="cancelAll" style = "width: 70px;height: 30px;"></u-button>
				</u-col>
			</u-row>
		</u-popup>

	</view>
</template>

<script>

import {formatImgPath} from '../../common/filter.js'

export default{
	data(){
		return{
			imgUrl:this.$config.BASE_imgUrl,
			index:0,
			isAll:false,
			scrollViewHeight: 0,
			triggered:false,
			cancelData:{
				pi_invoic_id:'',
				cancel_content:'',
				cancel_date:'',
				isSubmit:''
			},
			cancelInvoic:false,
			showDetailcard:false,
			loadingText:false,
			dets_detail:[],
			invoicType:'',
			invoicData:'',
			invoicId:'',
		};
	},
	// watch:{
	// 	$route() {
	// 		++this.index
	// 	}
	//   },
	onLoad(options) {
		this.invoicId = options.invoicId
		this.cancelData.pi_invoic_id = options.invoicId
		console.log(this.invoicId)
	},
	onShow(){
		// ++this.index
		this.getInvoicDetail()
	},
	mounted(){
		this.$util.getHeightWithTopEl(".util-bar").then(height => {
			this.scrollViewHeight = height;
		});
	},
	methods:{
		//下拉刷新
		pullDownRefresh(){
			if(this.triggered){
				return;
			}
			this.triggered = true;
			this.getInvoicDetail()
		},
		//停止刷新
		stopRefresh(){
			setTimeout(()=>{
				this.triggered = false;
				console.log('stop')
			}, 500)
		},

		cancelAll(){
			this.cancelInvoic = false
			this.cancelData.cancel_date = this.$util.getNowDate()
			this.cancelData.isSubmit = false
			this.$util.confirm({
				content: "确定取消开票申请？",
				confirmText: "确定"
			}).then(isConfirm => {
				if (isConfirm) {
					console.log("结果：",this.cancelData)
					this.$util.post({
						url: "app/piInvoic/cancel",
						data: this.cancelData,
					}).then(res => {
						uni.redirectTo({
							url: '/pagesB/open-ticket/ticket-apply-list'
						})
					})

				}
			})
			console.log("取消成功")
		},
		back(){
			uni.navigateBack()
		},
		//收款记录明细
		payDetail(items){
			this.showDetailcard=true;
			this.dets_detail=items;
		},
		cancel(){
			this.cancelInvoic = true
		},
		modify(){
			console.log("modify:",this.invoicData)
			uni.navigateTo({
				url: '/pagesB/open-ticket/ticket-apply?invoicId=' + this.invoicData.pi_invoic_id + '&result=' + this.invoicData.apply_isemail
			})
		},
		getInvoicDetail(){

			this.$api.tickets_apply_detail(this.invoicId).then((res) => {
				console.log("表单信息：",res)
				this.invoicData = res.piInvoicData_getPiInvoic
				console.log("当前状态：",this.invoicData.invoic_status)
				this.type()
			})
			// this.stopRefresh()
		},
		type(){
			console.log("开票类型：",this.invoicData.apply_invoic_type)
			if(this.invoicData.apply_invoic_type == 10){
				this.invoicType = "专票"
			}else if(this.invoicData.apply_invoic_type == 20){
				this.invoicType = "普票"
			}else if(this.invoicData.apply_invoic_type == 30){
				this.invoicType = "收据"
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.body{
	background:#F8F8F8;
}
.estate-box{
	background:#FFFFFF;
	padding:10px 10px 10px 10px;
	margin:10px;
	border-radius:6px;
	font-size:28rpx;
}
.danhao-text{
	font-size:32rpx;
	font-weight:bold;
}
.grey-text{
	color:#999999;
}
.black-text{
	padding-left:5px;
}
.color-text-1{
	padding-left:5px;
	color:#59A0FF;
}
.color-text-2{
	padding-left:5px;
	color:#0660FF;
}
.color-text-3{
	padding-left:5px;
	color:#000000;
}
.color-text-4{
	padding-left:5px;
	color:#ff0000;
}
.wy-title{
	text-align: center;
	font-size:18px;
	padding:15px 0 15px 0;
	border-bottom:1px solid #f1f1f1;
	font-weight:bold;
	background-color:#f1f1f1;
	border-radius:8px 8px 0 0;
}
.wybox{
	padding:15px;
	margin:15px;
	background-color:#f8f8f8;
	font-size:28rpx;
	border-radius:8px;
}
.wy-left-text{
	color:#999999;
}
.wy-right-text{
	color:#000000;
	margin-left:5px;
}
.scroll-Y{
	max-height:60vh;
}
</style>
